import Icon from '@/components/Icon'
import { StyledMediaContainer } from '@/style/global'
import styled from 'styled-components'

export const StyledFindVirtualRoomWrap = styled(StyledMediaContainer)`
	height: calc(100% - 54px - 47px);
	.content {
		height: 100%;
	}
	.source-progress {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 12px;
		height: 63px;
		.progress {
			margin: 0 10px;
		}
		.showChange {
			margin-left: 33px;
		}
	}
	.tips {
		font-size: 12px;
		cursor: pointer;
		margin: 5px 0;
		display: flex;
		align-items: center;
		span {
			margin-right: 10px;
		}
	}
	.card-wrap {
		width: calc(100% + 31px);
		height: calc(100% - 65px);
		&.long {
			height: calc(100% - 92px);
		}
		overflow: auto;
		.room-card {
			display: flex;
			height: 213px;
			border-top: 1px dotted #c7c7c7;
			padding-top: 14px;
			margin-right: 31px;
			font-size: 12px;
			float: left;
			color: #4e4e4e;
			.icon {
				padding-right: 14px;
				padding-top: 1px;
			}
			.info {
				flex: 1;
				.name-wrap {
					display: flex;
					flex-wrap: nowrap;
					font-weight: 700;
					line-height: 25px;
					font-size: 15px;
					.name {
						flex: 1;
						display: inline-block;
						max-width: 240px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						cursor: pointer;
						&:hover {
							color: #3e9bd0;
							text-decoration: underline;
						}
					}
					.share-btn {
						text-decoration: underline;
						cursor: pointer;
						color: #2874bb;
						margin-left: 15px;
						font-weight: 400;
						float: right;
						width: 35px;
					}
				}
				.type-wrap,
				.number-wrap {
					line-height: 24px;
				}
				.start-btn {
					margin-top: 10px;
				}
			}
		}
	}
	.empty {
		width: 100%;
		height: 663px;
		background: #fff;
		text-align: center;
		padding-top: 263px;
		font-size: 14px;
		color: #b6b6b6;
	}
	.footer {
		border-top: 2px solid #949799;
	}
`
export const TipPopUpStyled = styled.div`
	position: relative;
	border: 1px solid #ccc;
	background: #fff;
	max-width: 480px;
	padding: 30px 22px;
	border-radius: 6px;
	.source {
		display: flex;
		.text {
			position: relative;
			top: -4px;
			font-size: 12px;
		}
		.source-info {
			width: 81px;
			margin-left: 9px;
			height: 60px px;
			font-size: 12px;
			.name {
				font-size: 14px;
				line-height: 18px;
				margin-bottom: 3px;
			}
			.surplus-count span {
				color: #1e94da;
				font-size: 14px;
			}
		}
	}
	.close-btn {
		position: absolute;
		top: 5px;
		right: 5px;
	}
`
export const TipPopUpOptionStyled = styled.div`
	background: #fff;
	border: 1px solid #c7c7c7;
	margin-top: 1px;
	padding: 19px 0 20px 16px;
	position: relative;
	text-align: left;
	width: 384px;
	z-index: 99;
	font-size: 12px;
	border-radius: 6px;
	.line {
		display: flex;
		.checkbox {
			display: flex;
			flex-direction: column;
		}
		.label {
			width: 108px;
		}
	}
	.btn {
		display: inline-block;
		margin-left: 140px;
		margin-top: 20px;
		padding: 0;
	}
	.close-btn {
		position: absolute;
		top: 5px;
		right: 5px;
	}
`
export const TipIcon = styled(Icon)`
	background-position: -3px -2091px;
	width: 15px;
	height: 15px;
`
export const RoomIcon = styled(Icon)`
	background-position: -64px -1703px;
	width: 64px;
	height: 64px;
	cursor: default;
`
export const CloseIcon = styled(Icon)`
	background-position: -28px -251px;
	width: 9px;
	height: 9px;
`
export const DownIcon = styled(Icon)`
	background-position: -44px -100px;
	width: 10px;
	height: 10px;
	padding-left: 4px;
`

export const PanelStyle = styled(Icon)<{ isCollapse: boolean }>`
	background-position: ${(props) => (props.isCollapse ? ' -13px -247px' : ' 0 -247px')};
	width: 15px;
	height: 15px;
	margin-bottom: 2px;
`
//会议时长弹窗
export const ConfDurationModalWrap = styled.div`
	margin: 40px 33px 0;
	font-size: 12px;
	color: #616060;
	.line-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		.label {
			width: 83px;
		}
	}
	.kd-input-error-msg {
		white-space: nowrap;
	}
	.hour,
	.minute {
		margin: 0 20px 0 10px;
		align-self: end;
		&.disabled {
			color: #b6b6b6;
		}
	}
	.manual-end {
		margin-left: 83px;
	}
`
//虚拟会议室详情弹窗
export const VirtualRoomDetailWrap = styled.div`
	padding: 20px 33px;
	height: 300px;
	.line-wrap {
		display: flex;
		.label {
			width: 105px;
			height: 30px;
		}
	}
`
export const StyledVirtualRoomDetailFooter = styled.div`
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
`
